<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>

<fieldset>
    <legend>影厅编辑</legend>
<!--    表单方式提交数据-->
    <form action="addPlan" method="post">
        编号: <input name="id"><br>
        时间: <input name="playTime"><br>
        影片: <input name="mid"><br>
        影厅: <input name="hid"><br>
        价格: <input name="price"><br>
        <button>提交</button>
    </form>
</fieldset>

<style>
    span{color: red}
</style>
<fieldset id="app1">
    <legend>影片编辑</legend>
    <!--    表单方式提交数据-->
    <form action="addMovie">
        片名: <input v-model="movie.name"><span>{{errors.name}}</span><br>
        片长: <input v-model="movie.length"><span>{{errors.length}}</span><br>
        开始时间: <input v-model="movie.beginTime"><span>{{errors.beginTime}}</span><br>
        结束时间: <input v-model="movie.endTime"><span>{{errors.endTime}}</span><br>
        海报: <input v-model="movie.image"><span>{{errors.image}}</span><br>
        上传图片:<input id="img" type="file" @change="uploadImage"><br>
        海报图片:<img :src="movie.image" style="height: 200px">
        <button @click.prevent="addMoive">提交</button>
    </form>
</fieldset>
<script>
    var v = new Vue({
        el : "#app1",
        data : {movie:{} , errors:{}},
        methods:{
            addMoive(){
                //axios.post("xxx", movie)
                let p = new URLSearchParams();
                for (let name in this.movie) {
                    p.append(name, this.movie[name]);
                }
                axios.post("addMovie",p).then(res=>{
                    // 清空之前的拨错信息
                    this.errors = {};
                    alert(res.data.msg);
                    if(res.data.code == 0){
                        console.info(res.data.data);
                        for (let name in this.movie) {
                            // 过滤出当前 字段的 所有报错对象
                            let arr = res.data.data.filter(e => {
                                return e.field == name;
                            });
                            console.info("arr",arr);
                            if(arr.length){
                                // 转换数组元素
                                strArr = arr.map( e => {
                                    return e.defaultMessage;
                                });
                                console.info("strArr",strArr);
                                let msg = strArr.join(", ");
                                this.errors[name] = msg;
                            }
                            console.info("this.errors",this.errors);
                        }
                    }
                });
            },
            uploadImage(){
                let p = new FormData();
                p.append("image", img.files[0]);
                axios.post("uploadImage", p).then(res=>{
                    this.movie.image = res.data.data;
                });
            }
        }
    })
</script>



</body>
</html>